<!DOCTYPE HTML>
<!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="lt-ie9"><![endif]-->
<!--[if gt IE 8]><!-->
<html>
	<!--<![endif]-->

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=9, IE=8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>我的资料-因酷在线教育软件-中国在线教育平台第一品牌</title>
		<meta name="author" content="INXEDU(http://www.inxedu.com)" />
		<meta name="keywords" content="INXEDU,在线教育,网校搭建,网校,网络教育,远程教育,云网校,在线学习,在线考试" />
		<meta name="description" content="inxedu是一家专注“在线教育平台”的互联网公司，在国内属顶级在线教育解决方案提供商中的领跑者。为大、中型客户提供领先的在线教育平台方案服务。" />
		<link rel="shortcut icon" href="../../../favicon.ico" type="image/x-icon">
		<link rel="stylesheet" type="text/css" href="../../../css/reset.css">
		<link rel="stylesheet" type="text/css" href="../../../css/theme.css">
		<link rel="stylesheet" type="text/css" href="../../../static/inxweb/css/global.css">
		<link rel="stylesheet" type="text/css" href="../../../static/inxweb/css/web.css">
		<link href="../../../static/inxweb/css/mw_320_768.css" rel="stylesheet" type="text/css" media="screen and (min-width: 320px) and (max-width: 768px)">
		<script type="text/javascript" src="../../../static/common/webutils.js"></script>
		<script type="text/javascript" src="../../../static/common/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="../../../static/inxweb/user/ucTop.js"></script>
		<script type="text/javascript" src="../../../js/header.js"></script>
		<script type="text/javascript" src="../../../static/inxweb/js/common.js"></script>
		<!--[if lt IE 9]><script src="static/common/html5.js"></script><![endif]-->
		<script>
			var baselocation = "http://localhost:9095";
			var keuploadSimpleUrl = 'image/keupload?';
			var uploadServerUrl = 'http://localhost:8081';
			var uploadSimpleUrl = "image/gok4?";
		</script>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="../../../static/common/jcrop/jquery.Jcrop.min.css" />
		<script type="text/javascript" src="../../../static/common/jcrop/jquery.Jcrop.min.js"></script>
		<script type="text/javascript" src="../../../static/inxweb/user/user.js"></script>
		<script type="text/javascript" src="../../../js/userinfo.js"></script>
		<script type="text/javascript" src="../../../js/jquery.cookie.js"></script>
		<!--<script type="text/javascript" src="kindeditor/kindeditor-all.js"></script>-->
		<script type="text/javascript">
			$(function() {
				//				showTab(window.localStorage.getItem("_in")); //选项控制显示
				//				myProfileInfo();
				//				uploadImg('fileupload', 'uploadfile');
			});
		</script>
		<style type="text/css">
			.ke-upload-area {
				min-width: 54px;
				width: auto;
			}
			
			.ke-upload-area .ke-button-common,
			.ke-upload-area .ke-button-common input {
				border: 1px solid #FF5F16;
				background: #FFF7F3;
			}
			
			.ke-upload-area .ke-button-common input {
				border: none;
				width: 100px;
				color: #FF5F16;
				font-weight: bold;
			}
			
			.ke-upload-area .ke-button-common input:hover {
				background: #FFF2EC;
			}
		</style>
	</head>

	<body>
		<script src="../../../js/vue.min.js"></script>
		<article class="col-7 fl">
			<div class="u-r-cont" id="app">
				<section>
					<div>
						<section class="c-infor-tabTitle c-tab-title">
							<a href="javascript: void(0)" title="Wo的资料" style="cursor: default;">Wo的资料</a>
							<a href="javascript: void(0)" title="基本资料" class="clickAvailable current">基本资料</a>
							<a href="javascript: void(0)" title="个人头像" class="clickAvailable ">个人头像</a>
							<a href="javascript: void(0)" title="密码设置" class="clickAvailable ">密码设置</a>
						</section>
					</div>
					<div class="mt40" id="p_tCont">
						<script src="../../../js/vue.min.js"></script>
						<script src="../../../js/axios.min.js"></script>
						<div class="u-account-box" id="profile">
							<form method="post" id="updateForm">
								<input type="hidden" id="user_id" v-model="eduUser.userId" name="userId" />
								<ol class="u-account-li">
									<li> <label class="u-a-title"> <span class="fsize16 c-999">邮 箱</span> </label> <input type="text" class="u-a-inpt" id="email" name="email" placeholder="" v-model="eduUser.email" readonly="readonly" disabled="disabled"> </li>
									<li> <label class="u-a-title"> <span class="fsize16 c-999">手机号</span> </label> <input type="text" class="u-a-inpt" id="phone" name="mobile" placeholder="" v-model="eduUser.mobile" readonly="readonly" disabled="disabled"> </li>
									<li> <label class="u-a-title"> <span class="fsize16 c-999">姓 名</span> </label> <input type="text" class="u-a-inpt" id="userName" name="user_name" v-model="eduUser.userName" placeholder=""> </li>
									<li> <label class="u-a-title"> <span class="fsize16 c-999">昵 称</span> </label> <input type="text" class="u-a-inpt" id="showName" name="show_name" v-model="eduUser.showName" placeholder=""> </li>
									<li> <label class="u-a-title"> <span class="fsize16 c-999">性 别</span> </label>
										<input type="radio" name="sex" v-model="eduUser.sex" value="2" :checked="eduUser.sex==2" /><span class="vam fsize14 c-666">女</span>
										<input type="radio" name="sex" v-model="eduUser.sex" value="1" :checked="eduUser.sex==1" /><span class="vam fsize14 c-666">男</span> </li>
									<li> <label class="u-a-title"> <span class="fsize16 c-999">年 龄</span> </label>
										<select name="age" v-model="eduUser.age">
											<option v-for="count in  110" :value="count">{{count}}岁</option>

										</select>
									</li>
								</ol>
							</form>
							<div class="ml50 mt50 pl50">
								<a href="javascript:void(0)" title="" class="comm-btn c-btn-7" @click="updateUser()">提 交</a>
							</div>
						</div>
						
						<div class="u-account-box undis" id="img">
							<div id="tabCont">
								<section>
									<section class="ukindeditor of">
										<section class="clearfix">
											<input id="pic_Img" style="display: none;" type="file"  />
											<section> <input id="fileupload" onclick="$('#pic_Img').trigger('click')" type="button" width="133" value="选择头像" height="45" class="pa" /> </section>
											<!--class="dis pictureWrap"-->
											<div class="fl jc-demo-box pr mt40"> <img src="../../../static/inxweb/img/avatar-boy.gif" width="100%" height="100%" alt="头像加载中..." class="jcrop-preview" id="picture" />
												<div id="preview-pane" class="preview-pane1">
													<div class="preview-container"> <img src="../../../static/inxweb/img/avatar-boy.gif" class="jcrop-preview" alt="头像加载中..." width="100%" /> </div>
													<p class="c-999">大尺寸个人头像，大小<br/>180x180像素</p>
												</div>
												<div id="preview-pane" class="preview-pane2">
													<div class="preview-container" style="width: 80px; height: 80px; margin: 0 auto;"> <img src="../../../static/inxweb/img/avatar-boy.gif" class="jcrop-preview" alt="头像加载中..." width="100%" /> </div>
													<p class="c-999">中尺寸个人头像，80x80像素</p>
												</div>
												<div id="preview-pane" class="preview-pane3">
													<div class="preview-container" style="width: 50px; height: 50px;"> <img src="../../../static/inxweb/img/avatar-boy.gif" class="jcrop-preview" alt="头像加载中..." width="100%" /> </div>
													<p class="c-999">小尺寸个人头像，50x50像素</p>
												</div>
											</div>
											<div class="fl ml30 uploadWrap mt40">
												<p class="c-green">您上传的图片将会自动生成三种尺寸的清晰头像，请注意小尺寸的头像是否清晰。</p>
											</div>
											<section class="clear"></section>
											<div class="uploadBc of">
												<div class="tac"> <span id="save_message" > </span> </div>
												<div class="ml50 mt20 pl50">
													<a href="javascript:void(0)" title="" class="comm-btn c-btn-7" @click="updatePic">保 存</a>
												</div>
											</div>
										</section>
									</section>
								</section>
							</div> <input type="button" class="commBtn bgGreen w80 ml50" id="deleImage" style="display: none">
							<form method="post" name="photoForm"> <input id="photoPath" type="hidden" value="" /> <input type="hidden" value="1" id="picture_width" /> <input type="hidden" value="1" id="picture_height" /> <input type="hidden" value="82" id="txt_top" /> <input type="hidden" value="73" id="txt_left" /> <input type="hidden" value="120" id="txt_DropWidth" /> <input type="hidden" value="120" id="txt_DropHeight" /> <input type="hidden" id="txt_Zoom" /> </form>
							<form method="post" name="imgform" id="imgform">
								<input type="hidden" name="user_id" id="uid" value="" />
							</form>
						</div>
						<div class="u-account-box undis">
							<form method="post" name="pwdForm" id="pwdForm"> <input type="hidden" name="user.userId" value="71" />
								<ol class="u-account-li">
									<li style="display: none;"> <label class="u-a-title"> <span class="fsize16 c-999">id</span> </label> <input type="text" class="u-a-inpt" id="user_id" name="user_id" value="" placeholder="" maxlength="16"> <span class="u-a-error"></span> </li>
									<li> <label class="u-a-title"> <span class="fsize16 c-999">旧密码</span> </label> <input type="password" class="u-a-inpt" id="nowPassword" name="nowPassword" value="" placeholder="" maxlength="16"> <span class="u-a-error"></span> </li>
									<li> <label class="u-a-title"> <span class="fsize16 c-999">新密码</span> </label> <input type="password" class="u-a-inpt" id="newPassword" name="newPassword" placeholder="" maxlength="16"> <span class="u-a-error"></span> </li>
									<li> <label class="u-a-title"> <span class="fsize16 c-999">新密码确认</span> </label> <input type="password" class="u-a-inpt" id="confirmPwd"  name="confirmPwd" value="" placeholder="" maxlength="16"> <span class="u-a-error"></span> </li>
								</ol>
							</form>
							<div class="ml50 mt50 pl50">
								<a href="javascript:void(0)" title="" class="comm-btn c-btn-7" onclick="updatePwd();">修 改</a>
								<a href="javascript:void(0)" title="" class="comm-btn c-btn-7" onclick="javascript:$('#pwdForm').find('input').val('');">重 置</a>
							</div>
						</div>
					</div>
				</section>
			</div>
		</article>
		<script>
			var app = new Vue({
				el: "#profile",
				data: {
					eduUser: {
						email: "",
						mobile: "",
						userName: "",
						showName: "",
						sex: 0,
						age: "",
						userId: ""

					}
				},
				created: function() {
					var _this = this;
					showTab(window.localStorage.getItem("_in"));
					var token = localStorage.getItem("token");
					axios.defaults.headers.common["token"] = token;
					axios.post("http://localhost:9095/user/isLogin")
						.then(function(response) {
								console.log(response)
								if(response.data.code != 200) {
									alert(response.data.message)
									return;
								}
								_this.eduUser = response.data.data;
							},
							function(error) {
								alert("服务器错误")
							})
				},
				methods: {
					updateUser: function() {
						axios.defaults.headers.common["token"] = localStorage.getItem("token");
						axios({
								method: "post",
								url: "http://localhost:9095/user/update/personal",
								headers: {
									'Content-Type': 'application/x-www-form-urlencoded'
								},
								params: this.eduUser
							})
							.then(function(response) {
								if(response.data.code != 200) {
									alert(response.data.message)
									return;
								}
								parent.location.href = "../../menu/loginInfo.html"
							})
					}

				}
			})
			var img = new Vue({
				el: "#img",
				data: {

				},
				methods: {
					
					updatePic: function() {
//						alert(document.getElementById("pic_Img").files[0])
//						alert(this.$refs.img.files[0])
//						var formData = new FormData();
//						formData.append("userId", document.getElementById("user_id").value)
//						formData.append("file", document.getElementById("pic_Img").files[0])
//						axios({
//							url: "http://localhost:9095/user/update/img",
//							method: "post",
//							headers: {
//								'Content-Type': 'multipart/form-data'
////								'Content-Type': 'application/x-www-form-urlencoded'
//							},
//							params:{
//								"file":document.getElementById("pic_Img").files[0]
//							}
//						}).then(function(response) {
//							if(response.data.code == 200) {
//								window.location.reload();
//							} else {
//								alert(response.data.message)
//							}
//						})
						updateImg();
					}
				}
			})
		</script>
	</body>

</html>